<!-- 
    用户登录页面
-->
<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login-header">
                <h1 class="login-title">欢迎登录</h1>
                <p class="login-subtitle">请输入您的账号信息</p>
            </div>

            <div class="login-form">
                <div class="form-group">
                    <label class="form-label">用户名</label>
                    <div class="input-wrapper">
                        <i class="input-icon">👤</i>
                        <input type="text" class="form-input" placeholder="请输入用户名" v-model="loginForm.username" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">密码</label>
                    <div class="input-wrapper">
                        <i class="input-icon">🔒</i>
                        <input :type="showPassword ? 'text' : 'password'" class="form-input" placeholder="请输入密码"
                            v-model="loginForm.password" />
                        <button type="button" class="password-toggle" @click="togglePassword">
                            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
                        </button>
                    </div>
                </div>

                <div class="form-options">
                    <label class="checkbox-wrapper">
                        <input type="checkbox" v-model="loginForm.remember" />
                        <span class="checkbox-text">记住我</span>
                    </label>
                    <span @click="toRetrievePassword" class="forgot-link">忘记密码？</span>
                </div>

                <button class="login-btn" @click="handleLogin" :disabled="!loginForm.username || !loginForm.password">
                    {{ isLoading ? '登录中...' : '登录' }}
                </button>

                <div class="divider" v-if="__WECHAT__ || __DINGTALK_BROWSER__">
                    <span class="divider-text">或</span>
                </div>

                <div class="social-login" v-if="__WECHAT__ || __DINGTALK_BROWSER__">
                    <button v-if="__WECHAT__" class="social-btn wechat" @click="O_WECHAT">
                        <span class="social-icon">💬</span>
                        微信登录
                    </button>
                    <button v-if="__DINGTALK_BROWSER__" class="social-btn dingtalk" @click="O_DD">
                        <span class="social-icon">📱</span>
                        钉钉登录
                    </button>
                </div>
            </div>

            <div class="login-footer" v-if="isRegister">
                <p>还没有账号？
                <span class="register-link" @click="toRegister">立即注册</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import P_login from '@store/login/index.js'
import { storeToRefs } from 'pinia'
const P = P_login()
const { R, P_show } = storeToRefs(P)

const { __WECHAT__, __DINGTALK_BROWSER__, __WECHAT_REDIRECT__, __DINGTALK_BROWSER_REDIRECT__, __WECHAT_CLIENT__, __DINGTALK_BROWSER_CLIENT__ } = import.meta.env

// 是否注册功能
const isRegister = ref(true)


// 响应式数据
const showPassword = ref(false)
const isLoading = ref(false)

const loginForm = reactive({
    username: '',
    password: '',
    remember: false
})

// 切换密码显示/隐藏
const togglePassword = () => {
    showPassword.value = !showPassword.value
}

// 处理登录
const handleLogin = async () => {
    if (!loginForm.username || !loginForm.password) {
        alert('请输入用户名和密码')
        return
    }

    isLoading.value = true

    try {
        // 模拟登录请求
        await new Promise(resolve => setTimeout(resolve, 2000))

        console.log('登录信息:', loginForm)
        P_show.value = true
        R.value.push('/supplierpro')
        // alert('登录成功！')

        // 这里可以添加实际的登录逻辑
        // 比如调用API、存储token等

    } catch (error) {
        console.error('登录失败:', error)
        alert('登录失败，请重试')
    } finally {
        isLoading.value = false
    }
}


const O_DD = () => {
    if (__DINGTALK_BROWSER__) {
        window.location.href = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${__DINGTALK_BROWSER_REDIRECT__}&response_type=code&client_id=${__DINGTALK_BROWSER_CLIENT__}&scope=openid&state=dddd&prompt=consent`;
    }
}


const O_WECHAT = () => {
    if (__WECHAT__) {
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${__WECHAT_CLIENT__}&redirect_uri=${__WECHAT_REDIRECT__}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
    }
}


const toRegister = () => {
    R.value.push('/register')
}


const toRetrievePassword = () => {
    R.value.push('/retrievepassword')
}


</script>

<style scoped>
.login-container {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.login-box {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.login-subtitle {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.login-form {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 12px;
    font-size: 16px;
    color: #999;
    z-index: 1;
}

.form-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #999;
    padding: 0;
}

.password-toggle:hover {
    color: #667eea;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: #667eea;
}

.checkbox-text {
    font-size: 14px;
    color: #666;
}

.forgot-link {
    font-size: 14px;
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;
}

.forgot-link:hover {
    color: #5a6fd8;
}

.login-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.login-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.login-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.divider {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e1e5e9;
}

.divider-text {
    background: white;
    padding: 0 15px;
    color: #999;
    font-size: 14px;
}

.social-login {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.social-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid #e1e5e9;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.social-btn:hover {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-1px);
}

.social-btn.wechat:hover {
    border-color: #07c160;
    color: #07c160;
}

.social-btn.dingtalk:hover {
    border-color: #0089ff;
    color: #0089ff;
}

.social-icon {
    font-size: 16px;
}

.login-footer {
    text-align: center;
    color: #666;
    font-size: 14px;
    cursor: default;
}

.register-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    cursor: pointer;
}

.register-link:hover {
    color: #5a6fd8;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .login-box {
        padding: 30px 20px;
        margin: 10px;
    }

    .login-title {
        font-size: 24px;
    }

    .social-login {
        flex-direction: column;
    }
}
</style>
